<template>
  <div class="content">
    <div class="category">
      <div
        :class="{
          category__item: true,
          'category__item--active': currentTab === item.tab
        }"
        v-for="item in categories"
        :key="item.tab"
        @click="handleTabClick(item.tab)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="product">
      <div class="product__item" v-for="item in list" :key="item._id">
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__sales">月售{{ item.sales }}件</p>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin"> &yen;{{ item.oldPrice }} </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, -1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-reduce"></i
          ></span>
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, 1, shopName)
              }
            "
            ><i class="custom-icon custom-icon-add"></i
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { reactive, ref, toRefs, watchEffect } from 'vue'
  import { useRoute } from 'vue-router' // 路由跳转方法
  import { useStore } from 'vuex'
  import { get } from '@/utils/request.js'
  import { useCommonCartEffect } from '@/effects/cartEffects'

  const categories = [
    {
      name: '全部商品',
      tab: 'all'
    },
    {
      name: '秒杀',
      tab: 'seckill'
    },
    {
      name: '新鲜水果',
      tab: 'fruit'
    },
    {
      name: '休闲食品',
      tab: 'snack'
    }
  ]

  // 和tab切换相关的逻辑
  const useTabEffect = () => {
    const currentTab = ref(categories[0].tab)
    const handleTabClick = tab => {
      console.log('click:' + tab)
      currentTab.value = tab
    }
    return { currentTab, handleTabClick }
  }
  // 当前列表内容相关的函数
  const useContentListEffect = (currentTab, shopId) => {
    const content = reactive({ list: [] })
    const getContentData = async () => {
      const result = await get(`/api/shop/${shopId}/products`, {
        tab: currentTab.value
      })
      console.log('result:' + result)
      if (result?.code === 200 && result?.data?.length) {
        content.list = result.data
      }
    }
    // watchEffect：当首次页面加载时，或当其中监听的数据发生变化时执行
    watchEffect(() => {
      getContentData()
    })
    const { list } = toRefs(content)
    return { list }
  }

  const useCartEffect = shopId => {
    const store = useStore()
    const { cartList, changeCartItemInfo } = useCommonCartEffect(shopId)

    const changeShopName = (shopId, shopName) => {
      store.commit('changeShopName', { shopId, shopName })
    }
    const changeCartItem = (shopId, productId, item, num, shopName) => {
      changeCartItemInfo(shopId, productId, item, num)
      changeShopName(shopId, shopName)
    }

    const getProductCartCount = (shopId, productId) => {
      return cartList?.[shopId]?.productList?.[productId]?.count || 0
    }
    return {
      cartList,
      changeCartItem,
      getProductCartCount
    }
  }
  export default {
    name: 'Content',
    props: {
      id: String,
      shopName: String
    },
    setup() {
      const route = useRoute() // 获取路由

      const shopId = route.params.id
      const { currentTab, handleTabClick } = useTabEffect()
      const { list } = useContentListEffect(currentTab, shopId)
      const { cartList, changeCartItem, getProductCartCount } = useCartEffect(shopId)
      return {
        cartList,
        list,
        categories,
        handleTabClick,
        currentTab,
        shopId,
        getProductCartCount,
        changeCartItem
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.6rem;
    bottom: 0.5rem;
  }
  .category {
    overflow-y: scroll;
    width: 0.76rem;
    background: $search-bg-color;
    height: 100%;
    &__item {
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.14rem;
      color: $content-font-color;
      &--active {
        background: $bg-color;
      }
    }
  }
  .product {
    overflow-y: scroll;
    flex: 1;
    &__item {
      position: relative;
      display: flex;
      padding: 0.12rem 0.16rem;
      margin: 0 0.16rem;
      border-bottom: 0.01rem solid $content-bg-color;
      // 配合解决超出长度以省略号显示而不会出现换行
      &__detail {
        overflow: hidden;
      }
      &__img {
        width: 0.68rem;
        height: 0.68rem;
        margin-right: 0.16rem;
      }
      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出长度以省略号显示而不会出现换行
        @include ellipsis;
      }
      &__sales {
        margin: 0.06rem 0;
        line-height: 0.16rem;
        font-size: 0.12rem;
        color: $content-font-color;
      }
      &__price {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__yen {
        font-size: 0.12rem;
      }
      &__origin {
        margin-left: 0.06rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: $light-font-color;
        text-decoration: line-through; //中划线
      }
      // 购物车选购数量和加减号
      .product__number {
        position: absolute;
        right: 0rem;
        bottom: 0.12rem;
        line-height: 0.18rem;
        // 边框白色
        &__minus {
          position: relative;
          top: 0.01rem;
          color: $medium-font-color;
          margin-right: 0.05rem;
        }
        //无边框，背景蓝色
        &__plus {
          position: relative;
          top: 0.01rem;
          color: $btn-bg-color;
          margin-left: 0.05rem;
        }
      }
    }
  }
</style>
